<script setup lang="tsx">
import { ContentWrap } from '@/components/ContentWrap'
import { Search } from '@/components/Search'
import { useI18n } from '@/hooks/web/useI18n'
import { ElTabs, ElTabPane } from 'element-plus'
import { ref, reactive } from 'vue'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import BaseParametersVue from './components/BasicParameters.vue'
import VmiParametersVue from './components/VmiParameters.vue'
import PriceManagementVue from './components/PriceManagement.vue'
import MobileAppConfigVue from './components/MobileAppConfig.vue'

const activeName = ref<string>('first')

const searchParams = ref({})
const setSearchParams = (params: any) => {
  searchParams.value = params
  getList()
}

const { t } = useI18n()

const crudSchemas = reactive<CrudSchema[]>([
  {
    field: 'company',
    label: t('tableDemo.organization'),
    search: {
      component: 'Select',
      componentProps: {
        style: {
          width: '100%'
        },
        options: [
          {
            label: '湖南紫宸物联科技有限公司',
            value: 'ziciot'
          }
        ]
      }
    },
    form: {
      hidden: true
    }
  }
])

const { allSchemas } = useCrudSchemas(crudSchemas)
</script>

<template>
  <ContentWrap>
    <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />

    <ElTabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <ElTabPane label="基本参数" name="first"><BaseParametersVue /></ElTabPane>
      <ElTabPane label="VMI参数" name="second"><VmiParametersVue /></ElTabPane>
      <ElTabPane label="价格管理" name="third"><PriceManagementVue /></ElTabPane>
      <ElTabPane label="移动应用配置" name="fourth"><MobileAppConfigVue /></ElTabPane>
    </ElTabs>
  </ContentWrap>
</template>
